<template>
  <div class="business_drawer">
    <el-drawer
      :title="isTask ? '流程任务' : '发起流程'"
      append-to-body
      size="100%"
      :visible.sync="businessDrawer"
      :before-close="handleClose"
    >
      <div v-if="isTask" class="drawer_header">
        <div class="drawer_header_title">
          <span class="title">{{
            $store.state.workflow.businessConfig.processName
          }}</span>
          <el-tag size="mini">{{
            $store.state.workflow.businessConfig.status
          }}</el-tag>
        </div>
        <div style="font-size: 12px; color: #999">
          提交于{{ $store.state.workflow.businessConfig.createTime }}
        </div>
      </div>
      <el-menu
        :default-active="processType"
        class="el-menu-demo"
        mode="horizontal"
        @select="selectProcess"
      >
        <el-menu-item index="1">审批表单</el-menu-item>
        <el-menu-item index="2">流程图</el-menu-item>
      </el-menu>

      <div class="el-menu-form" v-show="processType === '1'">
        <processForm
          ref="processForm"
          :activities="activities"
          :remark="remark"
        />
      </div>
      <div class="el-menu-process" v-show="processType === '2'">
        <processPreview :previewConfig="businessConfig.modelData" />
      </div>
      <div v-if="formType === 'task-todo'" class="form_btn">
        <el-button type="primary" @click="showTakDailog('0')">通过</el-button>
        <el-button type="danger" @click="showTakDailog('1')">拒绝</el-button>
        <el-button type="success" @click="showTakDailog('2')">退回</el-button>
      </div>
      <div
        v-if="
          $store.state.workflow.formType === 'launch' ||
          $store.state.workflow.formType === 'edit'
        "
        class="form_btn"
      >
        <el-button size="large" @click="cancelForm">取 消</el-button>
        <el-button size="large" type="primary" @click="temporaryStorage"
          >暂存</el-button
        >
        <el-button size="large" type="primary" @click="confim">提交</el-button>
      </div>
      <el-dialog
        :title="'审核' + taskType"
        :visible.sync="taskDailog"
        width="40%"
        append-to-body
      >
        <div style="padding: 10px">意见/备注</div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="remark"
        >
        </el-input>
        <el-tag
          style="margin: 5px; cursor: pointer"
          v-for="(tag, index) in tags"
          :key="index"
          type="success"
          @click="remark = tag"
        >
          {{ tag }}
        </el-tag>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleTask">提 交</el-button>
        </span>
      </el-dialog>
      <div v-if="isTask" class="task_status">
        <svg-icon class="icon" :icon-class="taskStatus"></svg-icon>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import processPreview from "@/views/system/process/workflow/processDesign";
import processForm from "@/components/business/form/index.vue";
import {
  doProcess,
  getTaskProcess,
  getAllTaskProcess,
} from "@/api/model/task.js";
export default {
  data() {
    return {
      formJson: null,
      processType: "1",
      remark: "",
      taskDailog: false,
      type: "0",
      timeProcess: [],
      activities: [],
    };
  },
  components: { processForm, processPreview },
  computed: {
    businessDrawer() {
      return this.$store.state.workflow.businessDrawer;
    },
    isTask() {
      return this.$store.state.workflow.formType.includes("task");
    },
    taskType() {
      return this.type === "0" ? "通过" : this.type === "1" ? "拒绝" : "退回";
    },
    formType() {
      return this.$store.state.workflow.formType;
    },
    tags() {
      if (this.type === "0") {
        return ["已核实", "同意", "好的", "收到", "OK", "通过", "没问题"];
      } else if (this.type === "1") {
        return ["不同意", "拒绝", "反对", "不行", "不可以", "不支持"];
      } else {
        return ["不同意", "拒绝", "反对", "不行", "不可以", "有异议", "不支持"];
      }
    },
    businessConfig() {
      return this.$store.state.workflow.businessConfig;
    },
    taskStatus() {
      if (!this.timeProcess.length) {
        return "task-doing";
      }
      if (this.formType === "task-todo") {
        return "task-doing";
      } else {
        let doneTask = this.timeProcess.filter((e) => e.comments === "0");
        doneTask = doneTask.sort((a, b) => {
          return Date.parse(a) - Date.parse(b);
        });
        doneTask = doneTask.map((e) => e.taskName);
        doneTask = [...new Set(doneTask)];
        if (doneTask.length === this.activities.length - 1) {
          return "task-done";
        }
        const comments = this.timeProcess[0].comments;
        if (comments === "0") {
          return "task-doing";
        } else if (comments === "1") {
          return "task-refuse";
        } else {
          return "task-back";
        }
      }
    },
  },
  methods: {
    //关闭
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$store.commit("workflow/SET_BUSINESSDRAWER", false);
          this.$store.commit("workflow/SET_BUSINESSCONFIG", null);
        })
        .catch((_) => {});
    },
    //发起流程操作--确定
    async confim() {
      this.$refs.processForm.launchProcess();
    },
    //暂存
    temporaryStorage() {
      this.$refs.processForm.temporaryStorage();
    },
    //取消
    cancelForm() {
      this.handleClose();
    },
    //选择菜单
    selectProcess(index) {
      this.processType = index;
    },
    showTakDailog(type) {
      this.type = type;
      this.taskDailog = true;
    },
    //审核操作
    async handleTask() {
      let res = await doProcess({
        action: this.type,
        remark: this.remark,
        taskId: this.$store.state.workflow.taskId,
      });
      if (res.code === 200) {
        this.$message.success(this.taskType + "成功");
        this.$store.commit("workflow/SET_BUSINESSDRAWER", false);
        this.$store.commit("workflow/SET_BUSINESSCONFIG", null);
      }
    },
    //获取进度数据
    async getTaskProcessAPI() {
      if (this.isTask) {
        getAllTaskProcess({
          instanceId: this.businessConfig.instanceId,
        });
        let res = await getTaskProcess({
          instanceId: this.businessConfig.instanceId,
        });
        if (res.code === 200) {
          this.timeProcess = res.data;
        }
      }
      this.getProcessData();
    },
    //获取回显数据
    getProcessData() {
      const recursion = (processCongfig) => {
        const colorAndStatus = this.handleColorAndStatus(processCongfig);
        let list = [processCongfig.name];
        if (processCongfig.name.includes("$@")) {
          list = processCongfig.name.split("$@");
          list.pop();
        }
        this.activities.push({
          content: list.join(""),
          permission: this.showText(processCongfig),
          type: processCongfig.type,
          colorAndStatus,
        });
        if (processCongfig.child && processCongfig.child.type !== "end") {
          recursion(processCongfig.child);
        }
      };
      recursion(this.businessConfig.modelData);
    },
    //处理进度颜色和状态
    handleColorAndStatus(processCongfig) {
      //发起流程颜色
      if (processCongfig.type === "start") {
        return {
          color: "#0bbd87",
          status: "",
          remark: "",
        };
      }
      if (!this.isTask) {
        return {
          color: "",
          status: "",
          remark: "",
        };
      }

      //任务颜色
      if (this.isTask) {
        if (this.formType === "task-todo") {
          if (processCongfig.name === this.businessConfig.taskName) {
            return {
              color: "#ff832a",
              status: "",
              remark: "",
            };
          }
        }
        let doneTask = this.timeProcess.sort((a, b) => {
          return Date.parse(a) - Date.parse(b);
        });
        const item = doneTask.find((e) => e.taskName === processCongfig.name);
        if (item) {
          let color = "";
          if (item.comments === "0") {
            color = "#0bbd87";
          } else {
            color = "#c8102e";
          }
          return {
            color,
            status: item.commentsName,
            remark: item.remark,
          };
        } else {
          return {
            color: "",
            status: "",
          };
        }
      }
    },

    showText(config) {
      if (config.type == "start") {
        if (this.isTask && this.formType !== "task-myself") {
          return this.businessConfig.startUserName;
        } else {
          return "自己";
        }
      } else if (config.type == "approval") {
        let str = "";
        if (config.roleList.length) {
          const roleList = config.roleList.map((e) => e.roleName);
          str = roleList.join("、");
        }
        return str;
      }
    },
  },
  created() {
    this.getTaskProcessAPI();
  },
  destroyed() {
    this.$store.commit("workflow/SET_BUSINESSCONFIG", null);
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  border-top: 1px solid #e4e7ed;
  padding-right: 30px;
  padding: 10px;
}

.business_drawer {
  position: relative;
}
.form_btn {
  position: absolute;
  bottom: 0;
  right: 10px;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  // margin-top: 10px;
  width: 100%;
  background-color: #fff;
  .el-button {
    margin-right: 10px;
  }
}
.el-menu-form {
  height: 70vh;
  overflow: auto;
}
.el-menu-process {
  height: calc(100% - 300px);
  overflow: auto;
}
.drawer_header {
  .drawer_header_title {
    display: flex;
    align-items: center;
    padding: 5px 0;
    .el-tag {
      font-size: 12px;
    }
    .title {
      font-weight: bold;
      font-size: 18px;
      color: #161616;
      padding-right: 10px;
    }
  }
}
.task_status {
  position: absolute;
  right: 100px;
  top: 80px;
  font-size: 12px;
  width: 100px;
  height: 100px;
  .icon {
    width: 100%;
    height: 100%;
  }
}
</style>
